<template>
	<view class="consultBox" v-if="conversationList">
		<view class="consultList" v-if="conversationList">
			<uni-swipe-action>
				<uni-swipe-action-item  :right-options="item.notificationStatus == 1?options2:options" v-for="(item,index) in conversationList" :key="index"  @click="delItem($event,item)">
					<!-- 群组消息 -->
					<div @click="toGroupchat(item)" class="consult" v-if="item.latestMessage.content.groupinfo">
						<div class="img-div">	
							<i v-if="item.unreadMessageCount > 0">{{item.unreadMessageCount}}</i>
							<image :src="item.latestMessage.content.groupstatus == 'groupDel'?'../../static/img/groupDefault-del.png':item.latestMessage.content.groupinfo.portraitUri"></image>
						</div>
						<view class="content">
							<view class="name">
								<text>(群组){{item.latestMessage.content.groupinfo.name}}</text>
								<text>{{filterData2(item.latestMessage.sentTime) || 0}}</text>
							</view>
							<view class="message">{{item.latestMessage.content.type && item.latestMessage.content.type == 'imgMsg'?'[图片]':item.latestMessage.content.type && item.latestMessage.content.type == 'vioceMsg'?'[语音]':item.latestMessage.content.content}}</view>
						</view>
					</div>
					<!-- 单聊消息 -->
					<template  v-else>
						<navigator :url="encodeURI('/pages/imchat/chat?toUserId='+item.latestMessage.content.receive.id+'&name='+item.latestMessage.content.receive.name+'&headPicture='+item.latestMessage.content.receive.portraitUri)" class="consult"  v-if="item.targetId == (item.latestMessage.content.receive && item.latestMessage.content.receive.id)">
								<div class="img-div">
									<i v-if="item.unreadMessageCount > 0">{{item.unreadMessageCount}}</i>
									<image :src="item.latestMessage.content.receive.portraitUri"></image>
								</div>
								<view class="content">
									<view class="name">
										<text>{{item.latestMessage.content.receive.name}}</text>
										<text>{{filterData2(item.latestMessage.sentTime) || 0}}</text>
									</view>
									<view class="message">{{item.latestMessage.content.type && item.latestMessage.content.type == 'imgMsg'?'[图片]':item.latestMessage.content.type && item.latestMessage.content.type == 'vioceMsg'?'[语音]':item.latestMessage.content.content}}</view>
								</view>
						</navigator>
						<navigator :url="encodeURI('/pages/imchat/chat?toUserId='+(item.latestMessage.content.senduser && item.latestMessage.content.senduser.id)+'&name='+(item.latestMessage.content.senduser && item.latestMessage.content.senduser.name)+'&headPicture='+(item.latestMessage.content.senduser && item.latestMessage.content.senduser.portraitUri))" class="consult"  v-else>
								<div class="img-div">
									<i v-if="item.unreadMessageCount > 0">{{item.unreadMessageCount}}</i>
									<image :src="item.latestMessage.content.senduser && item.latestMessage.content.senduser.portraitUri"></image>
								</div>
								<view class="content">
									<view class="name">
										<text>{{item.latestMessage.content.senduser && item.latestMessage.content.senduser.name}}</text>
										<text>{{filterData2(item.latestMessage.sentTime) || 0}}</text>
									</view>
									<view class="message">{{item.latestMessage.content.type && item.latestMessage.content.type == 'imgMsg'?'[图片]':item.latestMessage.content.type && item.latestMessage.content.type == 'vioceMsg'?'[语音]':item.latestMessage.content.content}}</view>
								</view>
						</navigator>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="noneChating" v-if="conversationList.length <= 0">
			<image src="../../static/img/index/chattingNone.png"></image>
			<view class="tips">您还没有聊天记录~</view>
			<navigator url="/pages/healthTeam/index">去健管师列表</navigator>
		</view>
	</view>
</template>

<script>
	import {filterData2} from '@/static/js/filter.js'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action'
	const RongIMLib = require('@/static/js/IMSDK/RongIMLib-3.0.7-dev');
	// const im = RongIMLib.init({ appkey: 'qf3d5gbjq9qxh' });
	export default {
		components: {uniSwipeAction,uniSwipeActionItem},
		data() {
			return {
				conversationList:null,
				options:[{text: '免打扰',style: {backgroundColor: '#ccc'}},{text: '删除',style: {backgroundColor: '#dd524d'}}],
				options2:[{text: '开启通知',style: {backgroundColor: '#ccc'}},{text: '删除',style: {backgroundColor: '#dd524d'}}],
			}
		},
		onLoad(option) {
		},
		onShow() {
			const _this = this;
			setTimeout(()=>{
				_this.$im.Conversation.getList({count: 30}).then(function(conversationList) {
				   _this.conversationList = conversationList
				});
				_this.$im.watch({
					conversation: function(event){
						var updatedConversationList = event.updatedConversationList;
					},
					message: function(event){
						var message = event.message;
						if(!message.content.content){
							// 已读通知return
							return;
						}else{
							_this.$im.Conversation.getList({count: 30}).then(function(conversationList) {
								_this.conversationList = conversationList.map((aa)=>{
									if(event.message.targetId == aa.targetId){
										aa.latestMessage.content.content = event.message.content.content
									}
									return aa
								})
							});
						}
					},
					status: function(event){
						var status = event.status;
					}
				})
				_this.$im.Conversation.getList({count: 30}).then(function(conversationList) {
				   _this.conversationList = conversationList
				});
			},800)
		},
		methods: {
			filterData2:filterData2,
			// 删除会话
			delItem(v,e){
				const _this = this;
				if(v.index == 1){
					// 删除
					var targetId = e.targetId;
					var conversation = _this.$im.Conversation.get({
					  targetId: e.targetId,
					  type:	e.latestMessage.content.groupinfo?RongIMLib.CONVERSATION_TYPE.GROUP:RongIMLib.CONVERSATION_TYPE.PRIVATE
					});
					conversation.read().then(function(){
					  console.log('清除未读数成功'); // im.watch conversation 将被触发
					});
					conversation.destory().then(function(){
					  _this.$im.Conversation.getList({count: 30}).then(function(conversationList) {
					    console.log('获取会话列表成功', conversationList);
					    _this.conversationList = conversationList
					  });
					});
				}else{
					if(v.content.text == '开启通知'){
						// 免打扰
						let conversation = _this.$im.Conversation.get({
						    targetId: e.targetId,
						    type: RongIMLib.CONVERSATION_TYPE.PRIVATE
						});
						let statusItem = {
						    notificationStatus: 2, 
						};
						conversation.setStatus(statusItem).then(function() {
						    console.log('设置开启通知成功');
							_this.$im.Conversation.getList({count: 30}).then(function(conversationList) {
							  console.log('获取会话列表成功', conversationList);
							  _this.conversationList = conversationList
							});
						})
					}else{
						// 免打扰
						let conversation = _this.$im.Conversation.get({
						    targetId: e.targetId,
						    type: RongIMLib.CONVERSATION_TYPE.PRIVATE
						});
						let statusItem = {
						    notificationStatus: 1, 
						};
						conversation.setStatus(statusItem).then(function() {
							_this.$im.Conversation.getList({count: 30}).then(function(conversationList) {
							  console.log('获取会话列表成功', conversationList);
							  _this.conversationList = conversationList
							});
						    console.log('设置免打扰成功');
						})
					}
					
				}
			},
			toGroupchat(item){
				if(item.latestMessage.content.groupstatus == 'groupDel'){
					uni.showToast({
						title:'该群组已解散！',
						icon:'none'
					})
					return;
				}
				uni.navigateTo({
					url:encodeURI('/pages/imchat/groupchat?groupId='+item.latestMessage.content.groupinfo.id+'&groupName='+item.latestMessage.content.groupinfo.name+'&senderUserId='+localStorage.IMCOEDID)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.consultBox {
		background: #FFFFFF;
		overflow: hidden;
		.consultList {
			.consult {
				width: 100vw;
				display: flex;
				align-items: center;
				padding-left: 24upx;
				image {
					width: 94upx;
					height: 94upx;
				}
				.content {
					padding: 20upx 12upx 20upx 0;
					flex: 1;
					margin-left: 26upx;
					border-bottom: 1upx solid #E7E7E7;
					.name {
						display: flex;
						text {
							font-size: 30upx;
						}
						text:nth-child(1) {
							width: 50vw;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						text:nth-child(2) {
							flex:1;
							color: #999999;
							font-size: 24upx;
							text-align: right;
						}
					}
					.message {
						color: #999999;
						font-size: 26upx;
						margin-top: 24upx;
					}
				}
				.img-div{
					position: relative;
					i{
						width: 40upx;
						height: 40upx;
						position: absolute;
						top: -10upx;
						right: -10upx;
						background: #f00;
						z-index: 100;
						font-style: normal;
						border-radius: 40upx;
						font-size: 24upx;
						color: #fff;
						text-align: center;
						line-height: 40upx;
					}
				}
			}
		}
		.noneChating {
			margin-top: 228upx;
			image {
				display: block;
				margin: 0 auto;
				width: 260upx;
				height: 152upx;
			}
			.tips {
				margin: 62upx auto;
				text-align: center;
				color: #333333;
				font-size: 26upx;
			}
			navigator {
				border: 2upx solid #38CB97;
				color: #38CB97;
				font-size: 30upx;
				width: 282upx;
				height: 64upx;
				display: block;
				margin: 0 auto;
				text-align: center;
				border-radius: 32upx;
				line-height: 64upx;
			}
		}
	}
</style>
